<template>
  <view>
    <!-- 添加收货地址的按钮 -->
    <view class="btn-add-address-box" v-if="JSON.stringify(address)==='{}'">
      <button type="primary" class="btn-add-address" size="mini" @click="chooseAddress">请添加收货地址+</button>
    </view>
    <!-- 收货信息 -->
    <view class="address-info-box" v-else @click="chooseAddress">
      <view class="row1">
        <view class="row1-left">
          <text>收货人：{{address.userName}}</text>
        </view>
        <view class="row1-right">
          <text>手机号：{{address.telNumber}}</text>
          <uni-icons type="arrowright" size="16"></uni-icons>
        </view>
      </view>
      <view class="row2">
        <text>收获地址：{{addStr}}</text>
      </view>
    </view>
    <!-- 底部边框 -->
    <view class="img-boder">
      <image class="img" src="@/static/cart_border@2x.png" mode=""></image>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    name: "my-address",
    computed: {
      ...mapGetters('m_user', ['addStr']),
      ...mapState('m_user', ['address']),
    },
    data() {
      return {};
    },
    methods: {
      ...mapMutations("m_user", ["showAddress"]),
      // 点击了添加收货地址按钮
      chooseAddress() {
        const that = this;
        uni.chooseAddress({
          success(success) {
            //调用成功，赋值给address
            if (success.errMsg === 'chooseAddress:ok') {
              that.showAddress(success);
            }
          },
          fail(err) {
            console.log(err);
          }
        });

        //测试showModel
        /*  uni.showModal({
             content:'测试showModal',
             confirmText:'确认',
             cancelText:'取消',
             success(succ) {
             if(succ.confirm){
              uni.openSetting({
                success(res) {
                }
              })
             }else{
               console.log('取消了')
             }
             },
             fail(err) {
              console.log(err);
             },
           }); */
      }
    },
  }
</script>

<style lang="scss">
  // 底部边框样式
  .img-boder {
    .img {
      width: 750rpx;
      height: 3px;
    }
  }

  // 添加收货地址的按钮
  .btn-add-address-box {
    display: flex;
    height: 90px;
    justify-content: center;
    align-items: center;
  }

  //收货信息
  .address-info-box {
    font-size: 32rpx;
    padding: 0 5px;

    .row1 {
      display: flex;
      justify-content: space-between;
    }

    .row2 {
      margin-top: 10px;
    }
  }
</style>